<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>匀速运动的终止条件</title>
	<style type="text/css">
        #div1{
        	width:100px;height:100px;background: green;position: absolute;top:50px;left:600px;
        }
        #div2{
        	width:1px;height:300px;background: black;position: absolute;left:300px;
        }
        #div3{
        	width:1px;height:300px;background: black;position: absolute;left:100px;
        }
	</style>
	<script type="text/javascript">
            var timer = null;
        	function startMove(iTarget){
                var oDiv = document.getElementById('div1');
                clearInterval(timer);
                timer = setInterval(function(){
                	var speed =0;
                	if(oDiv.offsetLeft<iTarget){
                	    speed = 7;
	                }else{
	                	speed = -7;
	                }

	                if(Math.abs(iTarget-oDiv.offsetLeft)<=7){  //假如目标点和物体距离小于7
	                	// 说明到达目标地，清除定时器
	                	clearInterval(timer);
	                	//并把他的位置设置为和目标地重合
	                	oDiv.style.left = iTarget + 'px';
	                }else{
	                	oDiv.style.left = oDiv.offsetLeft +speed+ 'px';
	                }


                },30); 
        	}
        
	</script>
</head>
<body>
   
    <input type="button" value="到100" onclick="startMove(100)" />
	<input type="button" value="到300" onclick="startMove(300)" />
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
</body>
</html>